<template>
  <div>
      <div class="shopingtos">
          <div class="topbox">
              <div class="haerdtos">
                  <span class="iconfont icon-sousuo_o"></span>
                  <span>商城</span>
                  <span class="iconfont icon-gouwuche" @click="$router.push('/cardgoto');"></span>
              </div>
          </div>
          <div class="shoplsits">
              <van-grid square :column-num="5">
                <van-grid-item v-for="value in shoplistss" :key="value.id" :icon="value.icon" :text="value.name" @click="$router.push('/cardlist')" />
              </van-grid>
          </div>
          <div class="allshop">
              <div class="h3">
                  <span>全部商品</span>
              </div>
              <div class="poplists">
                  <div class="li" v-for="(item,index) in imgstos" :key="index">
                      <div class="img">
                        <span class="bao">包邮</span>
                        <img :src="item" alt="">
                        <div class="textpo">
                            <span>配料只有花生的花生酱</span>
                        </div>
                      </div>
                      <div class="textlto">
                          <span>花生酱0唐0添加高蛋白200g</span>
                      </div>
                      <div class="tel">
                        <span class="price">¥29.9</span>
                        <span class="toprice" >¥49.9</span>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Grid, GridItem } from 'vant';
Vue.use(Grid);
Vue.use(GridItem);

export default {
      data(){
        return{
          shoplistss:[
            {
              name:"果蔬",
              icon:"https://i1.douguo.com//upload/banner/7/4/0/74adad8165f2b080fd78c3531f1d44c0.png" ,
            },
             {
              name:"海鲜",
              icon:"https://i1.douguo.com//upload/banner/2/5/7/25bf9d090107d56a62394f12571877a7.png" ,
            },
             {
              name:"肉蛋",
              icon:"https://i1.douguo.com//upload/banner/0/d/6/0d359af6058784789fd6e060d23674f6.png",
            },
            {
              name:"粮油",
              icon:"https://i1.douguo.com//upload/banner/4/3/b/4382dba92d46db115ba57d9befb082bb.png" ,
            },
             {
              name:"零食",
              icon:"https://i1.douguo.com//upload/banner/4/7/e/478c4d38e64710331a6fa59e8d171d3e.png" ,
            },
             {
              name:"烘焙",
              icon:"https://i1.douguo.com//upload/banner/8/7/d/87098df6c119d6df3dc6af6278332cdd.png" , 
            },
             {
              name:"冲调饮品",
              icon:"https://i1.douguo.com//upload/banner/6/c/7/6c357c5a875c8c7edaeba50993eda647.png" ,  
            },
            {
              name:"个护",
              icon:"https://i1.douguo.com//upload/banner/5/c/7/5c58b3c217268019b4a253298624fd17.png" ,  
            },
             {
              name:"餐厨",
              icon:"https://i1.douguo.com//upload/banner/1/5/5/15b00882ada34e137aeac79d5f53a095.png" ,  
            },
             {
              name:"家居",
              icon:"https://i1.douguo.com//upload/banner/c/0/a/c0ad69df3709d63427c4acd459a38daa.png" ,  
            },
             {
              name:"服装家纺",
              icon:"https://i1.douguo.com//upload/banner/4/a/9/4acededd0ce0fd0d909b6c57a5940e79.png" ,  
            },
             {
              name:"美妆",
              icon:"https://i1.douguo.com//upload/banner/b/1/6/b18a1e12fef2b66c3b7221ea0b62db36.png" ,  
            },
            {
              name:"创新智能",
              icon:"https://i1.douguo.com//upload/banner/e/0/5/e08942f0aecdc4959d4c9cb6a85d2ef5.png" , 
            },
             {
              name:"时令节日",
              icon: "https://i1.douguo.com//upload/banner/f/d/6/fd616af5984c57285524784ee28fdc36.png" , 
            },
            {
              name:"母婴",
              icon:"https://i1.douguo.com//upload/banner/5/c/7/5c58b3c217268019b4a253298624fd17.png" ,  
            }
          ],
          imgstos:[
            "https://i1.douguo.com/upload/tuan/f/f/4/300_ffc9f1ff9d61b7ec0b3e9e05ac605574.jpg",
            "https://i1.douguo.com/upload/tuan/4/d/c/300_4db79d367a7f52077e448151c7a0d41c.jpg",
            "https://i1.douguo.com/upload/tuan/4/9/1/300_499e897981b283b8393ce650884129d1.jpg",
            "https://i1.douguo.com/upload/tuan/0/4/b/300_04ca36efa227fe7fcbbabeddffa4b3fb.jpg"

          ]
         
        }
      }
}
</script>

<style lang="less">
    .shopingtos{
      width: 100%;
      height: 100%;
      padding-bottom: 60px;
      .topbox{
        width: 100%;
        height: 60px;
        .haerdtos{
          width: 100%;
          height: 50px;
          padding: 10px;
          box-sizing: border-box;
          position: fixed;
          top: 0;
          left: 0;
          z-index: 30;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color: #ffff;
          box-shadow:0 0 1px rgb(223, 222, 222);
          span{
              font-size: 16px;
              &.iconfont{
                font-size: 20px;
              }
          }
        }
        
      }
      .shoplsits{
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
        .van-hairline--top::after {
          border-top-width: 0px;
        }
        .van-hairline::after{
          border: transparent;
        }
        .van-grid-item{
          height: 75px;
          .van-grid-item__text{
            font-size: 12px;
          }
        }
      }
      .allshop{
        padding-left: 10px;
        padding-right: 10px;
        margin-top: 10px;
        .h3{
          width: 100%;
          height: 30px;
          text-align: left;
          line-height: 30px;
          span{
            font-size: 16px;
            font-weight: 600;
          }
        }
        .poplists{
          margin-top: 10px;
          width: 100%;
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          .li{
            width: 45%;
            height: 285px;
            border-radius: 10px;
            overflow: hidden;
            .img{
              width: 100%;
              height: 190px;
              border-radius: 10px;
              position: relative;
              overflow: hidden;
              .bao{
                position: absolute;
                top: 8px;
                left: 8px;
                padding: 2px;
                border-radius: 4px;
                font-size: 10px;
                background-color: #ffce46;
              }
              img{
                width: 100%;
                height: 100%;
                margin: auto;
              }
              .textpo{
                width: 100%;
                height: 32px;
                position: absolute;
                bottom: 0;
                padding: 6px;
                box-sizing: border-box;
                background-color: #eeeeee;
                text-align: center;
                span{
                   font-size: 10px;
                }
              }
            }
            .textlto{
              width: 100%;
              height: 40px;
              text-align: left;
              font-size: 14px;
              overflow: hidden;
              padding-top: 10px;
            }
            .tel{
              width: 100%;
              height: 30px;
              display: flex;
              justify-content: left;
              align-items: center;
              span{
                &.price{
                  font-size: 16px;
                  margin-right: 5px;
                  color: #d8291b;
                }
                &.toprice{
                  font-size: 12px;
                  text-decoration:line-through;
                  color: #a5a5a5;
                }
              }
            }
          }
        }
      }
    }




</style>